//后台配置/数据配置

import React, { Component } from 'react';
import { connect } from 'dva';
import {  Card, Cascader, Button,  Input,Icon,Divider,Table, InputNumber, Popconfirm, Form ,Pagination,Checkbox,DatePicker   } from 'antd';
import styles from './VideoHistory.less';
//引入字体图标组件
import MyIcon from "../../components/common/MyIcon";
import {bgConQuery} from '../../services/redmoe';
import request from '../../utils/request';
import PublicService from '../../services/PublicService';
import { Row, Col, Collapse, message} from 'antd';
import { DragDropContext } from 'react-dnd';
import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
import Dustbin from './component/Dustbin';
import moment from 'moment';
import Box from './component/Box';
import Filt from './component/Filt';

const Panel = Collapse.Panel;

class VideoHistory extends Component {
    state = {
        width:'100%',
        num:24,
        height: '73vh',
        video:'70vh',
        dustbins:[
          { accepts: ['true'],open:false,padding:'0 1vw 0 1vw',marginTop:'1.5vh'},
        ],
        boxes: [
          {
            title:'项目部',
            sub:[
              { name:'点位1', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位2', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位3', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位4', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位5', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位6', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' }
            ],
          },
          {
            title:'项目现场',
            sub:[
              { name:'点位1', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位2', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位3', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位4', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位5', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' },
              { name:'点位6', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks' }
            ],
          }
         
        ],
        droppedBoxNames: [],
        loading: false,
        options:[],
        toggle:false,
        playUrl:'',
      };
      componentDidMount(){
        let t = this;
        t.setState({
          loading: true,
        });
        let options = [];
        request({
          url:'/jnhj/company/getAllCompanyName',
          method:'GET'
        }).then(data => {
        //   data.ret.map(item => {
        //     options.push({text:item.name,value:item.id})
        //   });
        })
        t.setState({
          options
        });
        t.onSearch();
      }
    
      isDropped(boxName) {
        return this.state.droppedBoxNames.indexOf(boxName) > -1;
      }
      //鼠标松开事件
      /**
       *  参数(@index 容器的下标  @item 拖动的name  @box 携带播放所需的信息)
       **/
      handleDrop(index, item, box) {
        let t = this;
        t.setState({
          toggle:true
        });
        /*
        * 此处t.setState执行两个参数，t.setState(update(this.state,{}),()=>{})
        * 第一个参数用于关闭播放器
        * 第二个参数用于开启播放器并更新播放的相关信息
        * update 扩展不变的数据（immutability-helper） 可参考github地址:https://github.com/kolodny/immutability-helper
        * {$set: any} 直接赋值覆盖
        * {$push: array} 数组中的push()语法
        * */
        t.setState(
          update(this.state, {
            dustbins: {
              [index]: {
                open:{
                  $set: false,
                }
              },
            }
          }),
          ()=>{
            const { name } = item;
            let url= '';
            for (let i = 0;i <box.length;i++){
              box[i].sub.map(item => {
                if (item.name === name){
                  url = item.url
                }
              })
            }
            const droppedBoxNames = name ? { $push: [name] } : {};
            this.setState(
              update(this.state, {
                dustbins: {
                  [index]: {
                    name:{
                      $set: name,
                    },
                  },
                },
                droppedBoxNames,
                playUrl:{
                  $set:url
                },
              }),
            )
          }
        )
      }
      //查询
      onSearch(){
        let t = this;
        t.f1.getForm().validateFields((err, value) => {
          if (!err) {
            t.setState({
              loading: true,
            });
            request({
              method:'GET',
              url:'/jnhj/visCamera/getVisListByBindObjId',
              params:{
                projectCompanyId:value.projectCompanyId,
              }
            }).then(data => {
              let boxes = [];
              data.ret.map((item,index) => {
                let title = item.name;
                let sub = [];
                item.cameraList.map((items,index) => {
                  sub.push({name:items.cameraName,type:'true', url:items.cameraCode})
                });
                boxes.push({title,sub})
              });
              t.setState({
                boxes,
                loading: false,
              })
            }).catch((err)=> {
              message.error('查询出错')
            })
          }
        })
      }
      //播放
      onPlay(){
        let t = this;
        t.f1.getForm().validateFields((err, value) => {
          if (!err){
            let playUrl = t.state.playUrl;
            let startTime = moment(moment(value.playTime[0]).format('YYYY-MM-DD HH:mm:ss')).diff(0);
            let endTime = moment(moment(value.playTime[1]).format('YYYY-MM-DD HH:mm:ss')).diff(0);
            request({
              method:'GET',
              url:'/jnhj/visCamera/getHisVideoUrlByCode',
              params:{
                cameraCode:playUrl,
                startTime,
                endTime,
              }
            }).then(data => {
              // let url = data.ret;
              let url = data.ret;
              this.setState(
                update(this.state, {
                  dustbins: {
                    [0]: {
                      lastDroppedItem: {
                        $set: url,
                      },
                      open:{
                        $set: true,
                      }
                    },
                  },
                }),
              )
            })
          }
        })
      }
    render() {
        let t = this;
        const { boxes, dustbins,options } = t.state;
        const items = [
            {
                type:'rangePicker',
                label:'播放时间',
                paramName: 'playTime',
                showTime:[{
                  hideDisabledOptions: true,
                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
                }],
                format:'YYYY-MM-DD HH:mm:ss',
                toggle:t.state.toggle
              },
          {
            type:'select',
            label:'时间选取',
            paramName: 'projectCompanyId',
            options: options
          },{
            type:'query'
          },{
            type:'rangePicker',
            label:'播放时间',
            paramName: 'playTime',
            showTime:[{
              hideDisabledOptions: true,
              defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
            }],
            format:'YYYY-MM-DD HH:mm:ss',
            toggle:t.state.toggle
          },{
            type:'play',
            toggle:t.state.toggle
          }
        ]

        return (
            <div>
              <Filt key="Filt" items={items} ref={ref=>t.f1=ref} submit={t.onSearch.bind(t)} play={t.onPlay.bind(t)} clearBtn={'hide'}/>
              <Row gutter={12} style={{ overflow: 'hidden', clear: 'both',height: '79.5vh' }}>
                <Col xs={20} sm={20} md={20} lg={20} xl={20}>
                  <div className={styles['wp-video']} style={{ overflow: 'hidden', clear: 'both' }}>
                    <Row style={{marginTop:'10px'}}>
                      <Col span={2}>
                        <div className={styles.blueBlock}><i></i><span>历史监控</span></div>
                      </Col>
                    </Row>
                    <Row>
                      {
                        dustbins.map(({ accepts, lastDroppedItem, name, padding,marginTop, open }, index) => (
                          <Col key={index} md={t.state.num} lg={t.state.num} xl={t.state.num}>
                            <Dustbin
                              key={index}
                              load={t.state.load}
                              name={name}
                              open={open}
                              padding={padding}
                              marginTop={marginTop}
                              accepts={accepts}
                              lastDroppedItem={lastDroppedItem}
                              width={t.state.width}
                              height={t.state.height}
                              video={t.state.video}
                              onDrop={item => this.handleDrop(index, item,t.state.boxes)}
                            />
                          </Col>
                        ))
                      }
                    </Row>
                  </div>
                </Col>
                <Col xs={4} sm={4} md={4} lg={4} xl={4}>
                  <div className={styles['wp-video']}>
                    <div className={styles.blueBlock} style={{paddingTop:'10px'}}><i></i><span>视频列表</span></div>
                    <Row>
                      <div style={{height:'50vh', overflow:'auto',marginTop:'10px'}}>
                        <Collapse bordered={false} accordion >
                          <Panel header="项目部" key="1" style={{border: 0,color:'#1A1A1A',fontSize:'14px',fontWeight:'bold',}}>
                            {
                              boxes[0].sub.map(({ name, type, url }, index) => (
                                <Box
                                  key={index}
                                  name={name}
                                  type={type}
                                  isDropped={this.isDropped(type)}
                                />
                              ))
                            }
                          </Panel>
                          <Panel header="项目现场" key="2" style={{border: 0,color:'#1A1A1A',fontSize:'14px',fontWeight:'bold',}}>
                            {
                              boxes[1].sub.map(({ name, type, url }, index) => (
                                <Box
                                  key={index}
                                  name={name}
                                  type={type}
                                  isDropped={this.isDropped(type)}
                                />
                              ))
                            }
                          </Panel>
                         
                        </Collapse>
                      </div>
                    </Row>
                  </div>
                </Col>
              </Row>
            </div>
          )
    }
}

function mapStateToProps (state) {
    return {
    };
  }
  export default connect(mapStateToProps)(DragDropContext(HTML5Backend)(VideoHistory));